<template>
  <div class="user-detail">
    <div class="top">
      <div class="top-label">账号头像</div>
      <img 
        :src="avatar" alt="" class="avatar" v-if="avatar"/>
      <img v-else src="@/assets/image/default-avatar.jpeg" alt="" class="avatar"/>
      <div class="right-wrapper">
        <img src="@/assets/image/right-icon.png" alt="" class="right-icon"/>
        <input 
          accept="image/png, image/jpeg"
          type="file" 
          ref="fileInput" 
          class="choose-file" @change="fileChange"/>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-label">账号名称</div>
      <p class="user-name" @click="toddleDialog">{{ username }}</p>
      <img 
        src="@/assets/image/right-icon.png" 
        @click="toddleDialog"
        class="right-icon" alt=""/>
    </div>

    <!-- 更改用户名弹窗 -->
    <div class="dialog" v-if="showDialog">
      <p class="mask"></p>
      <div class="dialog-content">
        <img 
          @click="showDialog = false"
          src="@/assets/image/close-dialog.png" 
          alt="" class="close-icon"/>
        <div class="title">更改名称</div>
        <input type="text" class="input" placeholder="请输入" v-model="usernameInput" maxlength="9"/>
        <div class="confirm-btn" @click="updateUsername">确定</div>
      </div>
    </div>

    <div class="cropper-wrapper" v-if="showCropper">
      <vueCropper
        ref="cropper"
        :img="option.img"
        :autoCrop="true"
        :fixed="true"
        :fixedNumber="[1, 1]"
      ></vueCropper>
      <div class="complate-btn" @click="cropComplate">确认保存</div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { updateUsername, updateHeadImage } from '@/api/account'
import { VueCropper }  from 'vue-cropper' 
import { ossUploadFile, getDomain } from '@/utils/aliOSS'

export default {
  components: {
    VueCropper,
  },
  data () {
    return {
      avatar: '', // 用户头像
      showDialog: false,
      username: '',
      usernameInput: '',
      showCropper: false,
      option: {
        img: '',
      },
    }
  },
  async mounted () {
    const domain = await getDomain()
    this.username = this.$route.query.username
    if (this.$route.query.avatar) {
      this.avatar = `${this.$route.query.avatar}`
    }
    document.title = '账号信息'
  },
  methods: {
    cropComplate () {
      this.$refs.cropper.getCropBlob((data) => {
        // do something
        console.log(data)
        let file = new window.File([data], 'a.png', {type: 'image/png'})
        console.log('file+++:', file)
        this.fileInfo = { raw: file}
        ossUploadFile({ raw: file}).then(res => {
          console.log('上传完成：', res)
          updateHeadImage({
            head_image: res.fileName
          }).then(() => {
            this.showCropper = false
            this.avatar = res.webUrl
            Toast('保存成功')
          })
        })
      })
    },
    fileChange (e) {
      console.log('file--:', this.$refs.fileInput.files['0'])
      const files = this.$refs.fileInput.files
      const file = files['0']
      console.log('file:', file)
      this.option.img = window.URL.createObjectURL(file)
      this.showCropper = true
      this.$nextTick(() => {
        this.$refs.cropper.startCrop()
      })
    },
    toddleDialog() {
      this.usernameInput = this.username
      this.showDialog = !this.showDialog
    },
    updateUsername () {
      if (!this.usernameInput) {
        Toast('请输入账号名称')
        return
      }
      updateUsername({
        username: this.usernameInput
      }).then(res => {
        console.log('更新成功')
        Toast('保存成功')
        this.username = this.usernameInput
        this.showDialog = false
      })
    },
  }
}
</script>

<style scoped>
.complate-btn {
  position: absolute;
  width: 48vw;
  height: 10.67vw;
  line-height: 10.67vw;
  border-radius: 5.33vw;
  left: 50%;
  bottom: 13.33vw;
  background: #0A67FF;
  text-align: center;
  transform: translateX(-50%);
  font-family: 思源黑体;
  font-size: 3.73vw;
  font-weight: 500;
  color: #FFFFFF;
}
.cropper-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}
.right-wrapper {
  position: relative;
}
.choose-file {
  position: absolute;
  left: -20vw;
  top: -5.33vw;
  width: 30vw;
  height: 16vw;
  opacity: 0;
}
/* dialog css start */
.confirm-btn {
  text-align: center;
  height: 8.53vw;
  line-height: 8.53vw;
  border-radius: 1.07vw;
  background: linear-gradient(98deg, #006EDD 0%, #009CEC 41%, #00A5A5 100%);
  font-family: 思源黑体;
font-size: 3.2vw;
font-weight: 500;
text-align: center;
letter-spacing: 0px;

color: #FFFFFF;
}
.dialog {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.3);
}
.dialog-content {
  position: relative;
  box-sizing: border-box;
  padding: 2.67vw 4vw 0;
  width: 71.73vw;
  height: 48.53vw;
  background: #ffffff;
  z-index: 100;
  border-radius: 3.2vw;
}
.title {
  margin-bottom: 6.4vw;
  line-height: 5.33vw;
  font-family: 思源黑体;
  font-size: 3.73vw;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0em;
  color: #333333;
}
.input {
  display: block;
  box-sizing: border-box;
  padding-left: 16px;
  margin-bottom: 13.07vw;
  width: 100%;
  height: 9.6vw;
  border-radius: 1.07vw;
  border: 0.27vw solid #E9E9E9;
  font-family: 思源黑体;
font-size: 3.2vw;
font-weight: 500;
letter-spacing: 0em;

color: #333333;
}
.close-icon {
  position: absolute;
  right: 3.2vw;
  top: 3.2vw;
  width: 2.13vw;
  height: 2.13vw;
}
/* dialog css end */

.right-icon {
  width: 4vw;
  height: 4vw;
}
.avatar {
  width: 16vw;
  height: 16vw;
  border-radius: 50%;
  margin-right: 3.2vw;
}
.user-name {
  flex: 1;
  text-align: right;
  margin-right: 3.2vw;
  font-family: 思源黑体;
  font-size: 3.73vw;
  font-weight: normal;
  color: #999999;
}
.top-label {
  flex: 1;
}
.user-detail {
  padding-top: 5.33vw;
  background: #F8F8FA;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 89.87vw;
  height: 24.53vw;
  margin: 0 auto 3.2vw;
  padding-left: 7.2vw;
  padding-right: 5.33vw;
  background-color: #fff;
  border-radius: 2.13vw;
}
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 89.87vw;
  height: 13.87vw;
  margin: 0 auto;
  padding-left: 7.2vw;
  padding-right: 5.33vw;
  background-color: #fff;
  border-radius: 2.13vw;
}
</style>